import { NavBar, DatePicker } from 'antd-mobile';
import './index.scss';
import { useMemo, useState, useEffect } from 'react';
import moment from 'moment';
import { useSelector } from 'react-redux';
import { groupBy } from 'lodash';

import DailyBill from './components/DailyBill/DailyBill';

export const Month = () => {
  const [dateVisible, setDateVisible] = useState(false);
  const { billList } = useSelector((state) => state.bill);
  const [curDate, updateCurDate] = useState(() => {
    return moment(new Date()).format('YYYY-MM');
  });

  // 按月分组
  const monthBillGroup = useMemo(() => {
    return groupBy(billList, (item) => moment(item.date).format('YYYY-MM'));
  }, [billList]);

  // 统计当前月份数据 -- > 计算宗支出、收入、钱数
  const [curMonthList, updateCurMonthList] = useState([]);
  const totalMoney = useMemo(() => {
    const pay = curMonthList.filter((x) => x.type === 'pay').reduce((a, c) => a + c.money, 0);
    const inCome = curMonthList.filter((x) => x.type === 'income').reduce((a, c) => a + c.money, 0);
    return {
      pay,
      inCome,
      total: inCome + pay,
    };
  }, [curMonthList]);

  // 页面初始渲染后，立刻拿到当前月数据
  useEffect(() => {
    const date = moment().format('YYYY-MM');
    if (monthBillGroup[date]) {
      updateCurMonthList(monthBillGroup[date] || []);
    }
  }, [monthBillGroup]);

  // 按月分组
  const daysGroup = useMemo(() => {
    const list = groupBy(curMonthList, (item) => moment(item.date).format('YYYY-MM-DD'));
    const keys = Object.keys(list);
    return {
      list,
      keys,
    };
  }, [curMonthList]);

  // 确认事件
  const onConfirm = (value) => {
    const date = moment(value).format('YYYY-MM');
    setDateVisible(false);
    updateCurDate(date);
    const list = monthBillGroup[date];
    updateCurMonthList(list || []);
  };

  // 关闭事件
  const onClose = () => {
    setDateVisible(false);
  };

  return (
    <div className="monthlyBill">
      <NavBar className="nav" backIcon={false}>
        月度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date" onClick={() => setDateVisible(true)}>
            <span className="text"> {curDate + ''} 月账单</span>
            <span className={`arrow ${dateVisible && 'expand'}`}></span>
          </div>
          {/* 统计区域 */}
          <div className="twoLineOverview">
            <div className="item">
              <span className="money">{totalMoney.pay}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{totalMoney.inCome}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{totalMoney.total}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            onConfirm={(val) => onConfirm(val)}
            onClose={() => onClose()}
            visible={dateVisible}
            max={new Date()}
          />
        </div>
        {daysGroup.keys.map((key) => (
          <DailyBill key={key} billList={daysGroup.list[key]} date={key} />
        ))}

      </div>
    </div>
  );
};
